/*
Copyright (c) 2025 Sidero Labs, Inc.

Use of this software is governed by the Business Source License
included in the LICENSE file.
*/

@import url('./fonts.css') layer(base);
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: Roboto, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --color-naturals-n0: #101118;
  --color-naturals-n1: #13141c;
  --color-naturals-n2: #15161e;
  --color-naturals-n3: #191b24;
  --color-naturals-n4: #1f222e;
  --color-naturals-n5: #272932;
  --color-naturals-n6: #2c2e38;
  --color-naturals-n7: #3a3b45;
  --color-naturals-n8: #5b5c64;
  --color-naturals-n9: #7d7d85;
  --color-naturals-n10: #878990;
  --color-naturals-n11: #9fa1a6;
  --color-naturals-n12: #c3c3c7;
  --color-naturals-n13: #e8e8e9;
  --color-naturals-n14: #ffffff;

  --color-primary-p1: #ffbea9;
  --color-primary-p2: #fe9e74;
  --color-primary-p3: #ff8b59;
  --color-primary-p4: #ff5f2a;
  --color-primary-p5: #ce5027;
  --color-primary-p6: #342321;

  --color-green-g1: #69c297;
  --color-green-g2: #2d9663;
  --color-green-g3: #141f21;

  --color-red-r1: #ff5c56;
  --color-red-r2: #6e2f30;
  --color-red-r3: #311c20;
  --color-red-rlogo: #f62d2c;

  --color-yellow-y1: #ffb200;
  --color-yellow-y2: #c68a00;
  --color-yellow-y3: #a97809;
  --color-yellow-y4: #252115;

  --color-blue-b1: #59a5ff;
}

@layer base {
  body {
    @apply bg-naturals-n0 text-naturals-n11 antialiased;
  }

  *::-webkit-scrollbar {
    @apply h-1.5 w-1.5 bg-transparent;
  }

  *::-webkit-scrollbar-thumb {
    @apply h-1.5 w-1.5 rounded-sm border border-naturals-n4 bg-naturals-n5;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}

@layer components {
  .modal-window {
    @apply z-30 flex w-1/3 flex-col rounded-sm bg-naturals-n3 p-8;
  }

  .link-primary {
    @apply inline-block text-primary-p3 not-hover:underline visited:text-primary-p1 hover:text-primary-p2 active:text-primary-p5;
  }

  .list-item-link {
    @apply font-bold text-naturals-n14 transition hover:text-naturals-n9;
  }

  .resource-label {
    @apply rounded-sm border px-2 py-0.5;

    background-color: color-mix(in hsl, currentColor 18%, transparent);
    border-color: color-mix(in hsl, currentColor 30%, transparent);

    &:is(a:not(:disabled), button:not(:disabled), [role='button']:not(:disabled)) {
      &:hover {
        filter: brightness(120%);
      }
      &:active {
        filter: brightness(80%);
      }
    }
  }

  .label-green {
    color: hsl(142 100 69);
  }

  .label-red {
    color: hsl(359 97 56);
  }

  .label-orange {
    color: hsl(15 90 64);
  }

  .label-violet {
    color: hsl(313 97 78);
  }

  .label-yellow {
    color: hsl(48 96 70);
  }

  .label-cyan {
    color: hsl(185 100 42);
  }

  .label-blue1 {
    color: hsl(211 76 68);
  }

  .label-blue2 {
    color: hsl(215 100 60);
  }

  .label-blue3 {
    color: hsl(256 81 70);
  }

  .label-light1 {
    color: hsl(0 65 74);
  }

  .label-light2 {
    color: hsl(13 81 87);
  }

  .label-light3 {
    color: hsl(48 96 87);
  }

  .label-light4 {
    color: hsl(128 32 81);
  }

  .label-light5 {
    color: hsl(184 29 80);
  }

  .label-light6 {
    color: hsl(208 70 86);
  }

  .label-light7 {
    color: hsl(257 81 87);
  }

  .label-grayed-out {
    color: hsl(0 0 100);
  }
}
